<!-- 工作量统计 -->
<template>
  <el-dialog title="工作量统计" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <div class="mod-config">
      <el-button-group style="margin-bottom: 10px;">
        <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      </el-button-group>
        <el-form inline>
          <el-form-item label="学年">
            <el-date-picker v-model="dataForm.createTimeStart" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
            至
            <el-date-picker v-model="dataForm.createTimeEnd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="dataForm.deptName" readonly></el-input>
          </el-form-item>
        </el-form>
        <div class="avue-crud">
          <el-table :data="dataList" border v-loading="dataListLoading" show-summary :summary-method="getSummaries">
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <el-table-column prop="jinShiNum" label="近视监测"></el-table-column>
            <el-table-column prop="dangAnNum" label="屈光档案"></el-table-column>
            <el-table-column prop="jiaoSuCCNum" label="角塑初查"></el-table-column>
            <el-table-column prop="jiaoSuFCNum" label="角塑复查"></el-table-column>
            <el-table-column prop="total" label="合计">
              <template slot-scope="scope">
                <el-button type="text">{{scope.row.total}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { checkWorkNumByUser } from '@/api/pvm/prevention/statistic_workload'

  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          createTimeStart: '',
          createTimeEnd: ''
        },
        dataList: [],
        dataListLoading: false,
      }
    },
    components: {

    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.dataForm = data
        this.getDataList()
      },
      searchHandle(){
        this.getDataList()
      },
      // 获取数据列表
      getDataList(data) {
        this.dataListLoading = true
        checkWorkNumByUser(this.dataForm).then(response => {
					if(response.data.code == '0'){
					  let responseData = response.data.data
					  responseData.forEach(item => {
					    item.total = parseFloat(item.jinShiNum) + parseFloat(item.dangAnNum) + parseFloat(item.jiaoSuCCNum) + parseFloat(item.jiaoSuFCNum)
					  })
					  this.dataList = responseData
					}else{
					  this.$message.error(response.data.msg)
					}
          this.dataListLoading = false
        })
      },
      //  合计
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index == 0) {
            sums[index] = '总计'
            return
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
          }
        });
        return sums;
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-col {
    margin-bottom: 0 !important;
  }

  /deep/ .el-input__prefix {
    display: none !important;
  }

  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }

  /deep/ .el-table__body-wrapper {
    order: 1;
  }

  .text-left {
    text-align: left !important;
  }

  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;

    tr th {
      background-color: #f4f5f7;
    }

    tr th,
    tr td {
      padding: 10px 8px;
      border: solid 1px #fff;
      text-align: center;
    }

    .miui-table-header td {
      background-color: #7898a8;
      color: #fff;
    }

    .miui-table-tbody {
      background-color: #cadee8;
    }

    .miui-table-label {
      width: 80px;
      background-color: #b2d5f6;
    }

  }
</style>
